pp108 : setClass Method

setClass Method

This method makes it possible to emphasize a tree item. This method sets an extra style class on the label of a treeItem.

Syntax

root.setClass( sClass );ortreeItem.setClass( sClass );

Parameters

sClass

Required, string. Name of the style class.

Remarks

Style classes with basic rules are allowed. For example, background-color, font, color, and border. Rules that influence positioning should not be used.

Example

The following example shows how the above method is used.

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd" >
<html>
<head>
    <title>setClass   example</title>
    <script src="/cordys/wcp/application.js"></script>
</head>
<script type="cordys/xml" id="menuData" >
    <menu>
            <Continent>
                  <caption>Asia</caption>
                  <Country>
                       <caption>India</caption>
                       <description>India is my Country</description>
                  </Country>
                  <Country>
                       <caption>Japan</caption>
                       <description>Japan popular for electronic trends</description>
                  </Country>
            </Continent>
            <Continent>
                <caption>Europe</caption>
                <description>Europe</description>
                <Country>
                      <caption>The Netherlands</caption>
                      <description>The Netherlands</description>
                </Country>
                <Country>
                      <caption>UK</caption>
                      <description>UK</description>
                </Country>
            </Continent>
       </menu>
</script>
<script type="cordys/xml" xmlns="" id="MenuTreeSchema" >
     <TreeSchema>
                <searchPath>//menu/</searchPath>
                <Root>
                     <description>Continents</description>
                </Root>
                <TreeItem id="ContinentID">
                     <searchPath>Continent</searchPath>
                     <description>caption</description>
                </TreeItem>
                <TreeItem id="CountryID">
                     <searchPath>Country</searchPath>
                     <description>caption</description>
                </TreeItem>
          </TreeSchema>
</script>
<style>
          .emphasize
           {
                 border:2px dashed blue;
                 background-color:red;
                 color:white;
                 font-weight:bold;
           }
     </style>
<script type="text/javascript">
function handleCheck(treeItem)
{
    var label = cordys.getTextContent(treeItem.getLabel());
    var chk = treeItem.isChecked();
    application.notify( label + " checked is " + chk);
}
function setClass()
      {
         var myTree = document.getElementById("myTree");
         myTree.root.expandAll();
         var nlNode = myTree.getItem("The Netherlands");
         nlNode.setClass("emphasize");
      }
</script>
<body>
     <p>Example of the setClass method.</p>
     <button onclick="setClass()">setClass NL</button>
	 <div cordysType="wcp.library.ui.Tree" id="myTree" treeData='menuData' treeSchema='MenuTreeSchema'> </div>

</body>
</html>

See Also

tree, getItem